<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选宿舍结果</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<style>
    html { color-scheme: light dark; }
    body { width: 35em; margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
<body>
<iframe src="http://hub.abc.com" id="hub" width="0" height="0"></iframe>

<h1>选宿结果</h1>

<div>
    你的宿舍为：
</div>

<div>
    <!-- 显示房间数据的表格 -->
    <table id="roomInfo" class="display hover" border="1">
        <thead>
        <tr>
            <th>楼名称</th>
            <th>单元名称</th>
            <th>房间名称</th>
        </tr>
        </thead>
        <tbody id="rbody">
        <tr id="content_room" class="roomInfo">
            <td id="bName"></td>
            <td id="uName"></td>
            <td id="rName"></td>
        </tr>
        </tbody>
    </table>
</div>

<div>
    你的室友为：
</div>

<div>
    <!-- 显示室友数据的表格 -->
    <table id="roommatesTable" class="display hover" border="1">
        <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody id="mbody">
        <tr id="content" class="roommatesInfo">
            <td id="number"></td>
            <td id="name"></td>
        </tr>
        </tbody>
    </table>
</div>

<div>
    <button id="btn" onclick="javascript:history.back(-1)">返回</button>
</div>
</body>

<script type="text/javascript">

    $(document).ready(function() {
        window.onload = function () {
            var iframeWin = document.getElementById("hub").contentWindow

            // 取到token
            let getRequest = {
                // 获取的方法
                method: 'getItem',
                // 获取的 key
                key: 'LoginToken',
            }
            // 向 iframe “中转页面”发送消息
            iframeWin.postMessage(getRequest, 'http://hub.abc.com')
            // 监听 iframe “中转页面”返回的消息
            window.addEventListener('message', function (e) {
                var tokenSend = e.data.result
                $.ajax({
                    type: 'post',
                    url: 'http://select.abc.com/select/result',
                    contentType: 'application/json',
                    headers: {
                        "Authorization": tokenSend
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.status == 200) {
                            var roommates = data.body.roommates;
                            var bname = data.body.building;
                            var uname = data.body.unit;
                            var rname = data.body.room;
                            var roommatesStr = '';
                            var roomStr = '';
                            roomStr += '<tr class="roomInfo">';//拼接处规范的表格形式
                            roomStr += '<td >' + bname + '</td>';
                            roomStr += '<td >' + uname + '</td>';
                            roomStr += '<td >' + rname + '</td>';
                            roomStr += '</tr>';
                            for (var key in roommates) {//循环遍历出json对象中的每一个数据并显示在对应的td中
                                roommatesStr += '<tr class="roommatesInfo">';//拼接处规范的表格形式
                                roommatesStr += '<td >' + key + '</td>';
                                roommatesStr += '<td >' + roommates[key] + '</td>';
                                roommatesStr += '</tr>';
                            }
                            $("#mbody").html(roommatesStr);
                            $("#rbody").html(roomStr);
                        } else if (data.status == 100) {
                            alert("尚未登录！");
                            window.location.href="http://login.abc.com"
                        } else {
                            alert(data.msg);
                            //window.location.href="http://abc.com"
                        }
                    },
                    error: function () {
                        alert('参数错误！');
                    }
                });
            })


        }
    })
</script>
</html>